
import React, { useState } from'react';
import './index.css'; // 引入CSS文件

const ImageAnimationExample = () => {
  const [showSecondImage, setShowSecondImage] = useState(false);

  const handleAnimation = () => {
    setShowSecondImage(true);
  };

  return (
    <div className="image-container">
      <button onClick={handleAnimation}>触发动画</button>
      <div className={`image-wrapper ${showSecondImage? 'animate-image' : ''}`}>
        {!showSecondImage && (
          <img
            src="https://example.com/first-image.jpg" // 替换为第一张图片的实际路径
            alt="第一张图片"
          />
        )}
        {showSecondImage && (
          <img
            src="https://example.com/second-image.jpg" // 替换为第二张图片的实际路径
            alt="第二张图片"
          />
        )}
      </div>
    </div>
  );
};

export default ImageAnimationExample;
